import React, {PureComponent} from "react";
import {connect} from 'react-redux';
import {Layout, Menu, Icon} from 'antd';
import {Link} from 'react-router-dom';
import emitter from '../../../common/events'

const {Sider} = Layout;
const SubMenu = Menu.SubMenu;

class SiderComponent extends PureComponent {

    state = {
        defaultOpenKeys: ['sub1'],
        defaultSelectedKeys: []
    };

    onClick = (item, key, keyPath) => {
        emitter.emit('changeMenuItem', item.key);
    };

    render() {
        const {collapsed, onCollapse} = this.props;
        return <Sider style={{
            overflow: "auto", height: "100vh", position: "fixed", left: 0,
        }}
                      collapsible
                      collapsed={collapsed}
                      onCollapse={onCollapse}
        >
            <div className="logo"/>
            <Menu theme="light" mode="inline" defaultOpenKeys={this.state.defaultOpenKeys}
                  defaultSelectedKeys={this.state.defaultSelectedKeys} onClick={this.onClick}>
                <SubMenu
                    key="sub1"
                    title={<span><Icon type="folder"/><span>UFile-C2</span></span>}
                >
                    <Menu.Item key="machine">
                        <Link to='/logList'>
                            <Icon type="codepen"/>
                            <span className="nav-text">机器</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="u3d">
                        <Link to='/logList'>
                            <Icon type="code-sandbox"/>
                            <span className="nav-text">u3d</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="android">
                        <Link to='/logList'>
                            <Icon type="android"/>
                            <span className="nav-text">android</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="iOS">
                        <Link to='/logList'>
                            <Icon type="apple"/>
                            <span className="nav-text">iOS</span>
                        </Link>
                    </Menu.Item>
                </SubMenu>
                <SubMenu
                    key="sub2"
                    title={<span><Icon type="question-circle"/><span>关于</span></span>}
                >
                    <Menu.Item key="sub2-1">
                        <Link to='/about'>
                            <Icon type="info-circle"/>
                            <span className="nav-text">系统更新说明</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="sub2-2">
                        <Link to='/openAPI'>
                            <Icon type="deployment-unit"/>
                            <span className="nav-text">接入文档API</span>
                        </Link>
                    </Menu.Item>
                </SubMenu>
            </Menu>
        </Sider>
    }
}

const mapState = (state) => ({});

const mapDispatch = (dispatch) => ({});

export default connect(mapState, mapDispatch)(SiderComponent);